import React from 'react';
import './Saycomment.css';
import moment from 'moment';
import { Toast} from 'antd-mobile';

class Saycomment extends React.Component {  
    constructor(props){          
    super(props);        
    this.state = {
        //评论信息
        time:this.props.time,
        content:this.props.content,
        userid:this.props.userid,
        likevalue: this.props.likenums==0? '点赞' : this.props.likenums,
        //页面点赞
        selectlike:'no',
    } 
  }  

  async componentDidMount() {
    //获取用户的头像和昵称
    fetch(`https://www.prebeauty.work/user/${this.state.userid}`,{
    method:'GET',
    headers:{
        'content-type': 'application/json'
    }
    }).then((res)=>{
        if(res.status===200){
            res.json().then( (data)=> {
                this.setState({
                    confimg:data[0].image,
                    nickname:data[0].name,
                })
                console.log(this.state.confimg)
            })
        }else {
            alert("出现一个问题");
        }
    })
}

  /*改变点赞的图标 */
    changeLikeicon(){
        if(this.state.selectlike === 'no'){
            this.setState({
                selectlike:'yes'
            })
            Toast.success('已点赞',1);
        }else if(this.state.selectlike === 'yes'){
            this.setState({
                selectlike:'no'
            })
            Toast.fail('取消点赞',1);
        }
    }

  render() { 
    var time=this.props.time;
    var sayDate= moment(parseInt(time)).format('MM-DD HH:mm:ss');

    return (
      <div>
        <div className='saycomment-container'>
            {/*评论者的个人信息 */}
            <img
                style={{width:'12%',height:'44px', borderRadius:22, marginTop:'10px',marginLeft:'5%',float:'left'}}
                src={this.state.confimg}	
                alt='.'
            />
            <p style={{float:'left',marginTop:'10px',marginLeft:'3%'}}>{this.state.nickname}</p><br/> 

            {/*评论内容时间 */} 
            <p style={{marginTop:'20px',marginBottom:'7px',marginLeft:'20%',marginRight:'5%',fontSize:'15px'}}>{this.props.content}</p>
            <p className='saycomment-time'>{sayDate}</p>
            
       
        </div>
      </div>
    ) 
  }  
} 

export default Saycomment